<template>
    <el-drawer
        v-model="showDrawer"
        :title="drawerTitle"
        direction="rtl"
        @close="closeFn"
        :size="423"
    >
       <div class="">
           <el-form
                ref="formRef"
                :model="form"
                label-width="90px"
                :rules="rules"
            >
                <el-form-item label="检测编号:">                    
                    <el-input size="small" placeholder="请填写检测编号" :disabled="true" v-model="form.checkCode"></el-input>
                </el-form-item>
                <el-form-item label="采购编号:">                    
                    <el-input size="small" placeholder="请填写采购编号" :disabled="true" v-model="form.purchaseCode"></el-input>
                </el-form-item>
                <el-form-item label="物料编号:">                    
                    <el-input size="small" placeholder="请填写物料编号" :disabled="true" v-model="form.materialCode"></el-input>
                </el-form-item>
                <el-form-item label="物料名称:">                    
                    <el-input size="small" placeholder="请填写物料名称" :disabled="true" v-model="form.materialName"></el-input>
                </el-form-item>
                <el-form-item label="物料数量:" >                    
                    <el-input size="small" placeholder="请填写物料数量" :disabled="true" v-model="form.planQuantity"></el-input>
                </el-form-item>                
                <el-form-item label="检验日期:" >
                    <el-date-picker                        
                        v-model="form.checkTime" 
                        :disabled="true" type="date" 
                        size="small" style="width: 100%;"  
                        placeholder="请选择生产时间">
                    </el-date-picker>
                </el-form-item>               
                <el-form-item label="抽检数量:" prop="checkNum">                    
                    <el-input size="small" placeholder="请填写抽检数量"  v-model="form.checkNum"></el-input>
                </el-form-item>
                <el-form-item label="检验情况:" prop="checkStatus">
                    <el-select  @change="changeProduce" v-model="form.checkStatus"  placeholder="请选择检测情况" style="width: 100%;" size="small">
                        <el-option 
                            v-for="item in checkStatuslist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"                           
                        ></el-option>
                    </el-select>
                    <!-- <el-input size="small" placeholder="请填写产品名称"  v-model="form.produceName"></el-input> -->
                </el-form-item>               
           </el-form>
       </div>
       <div class="drawer-footer-box">
           <el-button size="small" @click="closeFn">取消</el-button>
           <el-button type="primary" size="small" :loading="isLoading" @click="submitInfo">确定</el-button>
        </div>
    </el-drawer>
</template>
<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus'
import moment from 'moment'; 
export default {
    name: 'productDrawer',
    props: {
       showDrawer: {
           type: Boolean,
           default: false,
           required: false
       },
       drawerTitle: {
           type: String,
           default: '新增',
           required: false
       }       
    },
    emits: ['closeDrawerFn','submitCallback'],
    setup(props, {emit}){
        let data  = reactive({
          form: {
                checkCode: '',
                purchaseCode: '',
                materialCode: '',
                materialName: '',
                planQuantity: '',
                checkNum: '',
                checkTime: moment(new Date()).format('YYYY-MM-DD'),
                checkStatus: ''
          },
          checkStatuslist: [
              {
                  id: 2,
                  name: '不通过'
              },              
              {
                  id: 1,
                  name: '通过'
              }              
          ],
          isLoading: false
        })
        const rules = reactive({
            checkStatus: [
                {
                    required: true,
                    message: '请选择检测情况！',
                    trigger: 'change',
                },
            ],
            checkNum: [
                {
                    required: true,
                    message: '请填写抽检数量！',
                    trigger: 'change',
                },
            ]           
        })        
        const formRef = ref(null)       
        function afterShowDrawer(rowData){           
            data.form = Object.assign({}, rowData) 
            // console.log(rowData)
            data.form.checkTime = moment(new Date()).format('YYYY-MM-DD')    
            if(rowData.materialStatus!==0){
                data.form.checkStatus = rowData.materialStatus 
            }
        }
        function closeFn(){
            data.isLoading = false     
            formRef.value.resetFields()       
            emit('closeDrawerFn')
        }
        async function addInfo(){
            let requstData = requstData = {...data.form, isEdit:data.isEdit}           
            let res = await axios.post('/checkFromInfo', requstData)
            let result = res.data
            if(result.success){
                ElMessage({
                    message: result.result,
                    type: 'success',
                })
                closeFn()
                emit('submitCallback')
            }
            else{
                ElMessage({
                    message: result.result,
                    type: 'error',
                })
                data.isLoading = false     
            }
        }
        function submitInfo(){
            data.isLoading = true
            // console.log('formRef.value', formRef.value)
            formRef.value.validate((valid) => {
                if (valid) {
                    console.log(data.form)
                    // closeFn()
                    addInfo()
                } else {                    
                    data.isLoading = false
                    return false
                }
            })            
            // console.log(data.isLoading)
            // console.log('提交数据')
        }
        function changeProduce(val){
            console.log('选中值', val)                         
            // console.log('index', index)
        }
        onMounted(()=>{
            console.log(moment(new Date()).format('YYYY-MM-DD'))
        })
        return {
            rules,
            formRef,
            ...toRefs(data),          
            afterShowDrawer,  
            closeFn,
            submitInfo,
            changeProduce
        }    
    }
}
</script>